<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        
        <input type="checkbox" name="hobby" value="篮球"> 篮球
        <input type="checkbox" name="hobby" value="足球"> 足球
        <input type="checkbox" name="hobby" value="保龄球"> 保龄球
        <input type="checkbox" name="hobby" value="玻璃球"> 玻璃球
        <button>提交</button>
    </div> 
    <script>
        var hobbys = document.querySelectorAll('[name=hobby]');
        var oBtn = document.querySelector('button');
        // 将伪数组转化为普通数组，以便使用数组中的方法
        hobbys = Array.from(hobbys);

        oBtn.onclick = function(){
            // 选中的复选框[checked=true的]，留下
            var newArr = hobbys.filter(function(item){
                return item.checked;
            })
            // 获取选中的复选框的value值
            var data = newArr.map(function(item){
                return item.value;
            })
            console.log('data:' , data);
        }
    </script>
</body>
</html>